// 搜索框下拉树
<template>
  <!-- 下拉 trigger点击弹出， -->
  <Dropdown ref="drop"
            trigger="click"
            placement="bottom-start"
            class="treeSelect">
    <div @click="showDropdown($event)">
      <!-- 传入插槽就显示 -->
      <template v-if="$slots.default">
        <slot></slot>
      </template>
      <!-- 没有插槽显示，默认输入框 -->
      <template v-else>
        <!-- mouseHover 移入移除 显隐清除图标 -->
        <div class="relative"
             @mouseenter="mouseHover = true"
             @mouseleave="mouseHover = false">
          <Input v-model="p_value"
                 :placeholder="placeholder"
                 readonly
                 :disabled="disabled"
                 class="treeSelect-input" placeholderColor="#fff" :class="inpStyle">
          </Input>
          <!-- 清空图标 用input默认的清空图标不会清空多选选中的数据 -->
          <Icon type="ios-close-circle"
                class="ivu-select-arrow treeSelect-clear"
                v-show="isShowClear"
                @click.native.stop="onClear"></Icon>
        </div>
      </template>
    </div>
    <div class="treeSelect-dropdown"
         slot="list">
      <Input ref="searchInput"
             v-model="searchValue"
             :placeholder="searchPlaceholder"
             search
             @on-change="onChangeSearchValue"
             v-if="search" />
      <div class="treeSelect-tree">
        <MyTree ref="myTree"
                :data="treeData"
                :keyName="keyName"
                :show-checkbox="checked"
                @on-select-change="onSelectChange"
                @on-check-change="onCheckChange"></MyTree>
      </div>
      <!-- 多选显示确定按钮 -->
      <div class="treeSelect-bottom"
           v-if="checked">
        <Button type="primary"
                @click.stop="onClickSave">确定</Button>
      </div>
    </div>
  </Dropdown>
</template>

<script>
import MyCollapse from '@/components/common/MyCollapse';
import MyTree from '@/components/common/MyTree';
export default {
  components: { MyCollapse, MyTree },
  props: {
    value: String,
    placeholder: String,
    // 清除图标
    clearable: Boolean,
    keyName: {
      type: String,
      default: 'name'
    },
    data: Array,
    search: Boolean,
    searchPlaceholder: String,
    checked: Boolean,
	inpStyle:String,
    disabled: null
  },
  data () {
    return {
      p_value: '',
      mouseHover: false,
      treeData: [],
      selectArr: [],
      searchValue: '',
    };
  },
  watch: {
    value (newVal) {
      this.p_value = newVal
    },
    data: {
      deep: true,
      handler () {
        this.resetTreeData()
      }
    }
  },
  computed: {
    // p_value  私有的value(input)
    isShowClear () {
      return this.clearable && this.p_value && this.mouseHover && !this.disabled
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.resetTreeData()
    },
    showDropdown (e) {
      if (this.disabled) return e.stopPropagation()
    },
    onClear () {
      this.resetTreeData()
      if (this.checked) {
        this.onClickSave()
      } else {
        this.onSelectChange(null, { id: '', name: '' })
      }
    },
    onSelectChange (section, data) {
      this.$emit('onSelectChange', data)
      !this.checked && this.$refs.drop.handleClose()
    },
    onCheckChange (section, data) {
      this.selectArr = section
    },
    onClickSave () {
      this.$emit('onCheckChange', this.selectArr)
      this.$refs.drop.handleClose()
    },
    // 树input修改
    onChangeSearchValue () {
      let newData = JSON.parse(JSON.stringify(this.data))
      if (!this.searchValue) {
        this.treeData = newData
      } else {
        this.treeData = this.treeSearch(newData)
      }
    },
    // 递归  查询
    treeSearch (arr) {
      return arr.filter(item => {
        if (item[this.keyName].indexOf(this.searchValue) !== -1) {
          // console.log(item[this.keyName]);
          return item
        } else {
          if (item.children) {
            item.children = this.treeSearch(item.children)
            if (item.children.length > 0) {
              return item
            }
          }
        }
      });
    },
    // 拿到树的值后，复制一份，因为筛选后会改变改，所以说不能对原来的值操作
    resetTreeData () {
      if (!this.data) return this.treeData = []
      // 深拷贝
      let newData = JSON.parse(JSON.stringify(this.data))
      this.treeData = newData
      this.$refs.myTree.resetTreeData()
      if (this.search) this.searchValue = ''
      if (this.checked) this.selectArr = []
    }
  },
}
</script>

<style lang='scss'>
.treeSelect {
  .ivu-select-dropdown {
    padding: 0;
    width: 300px;
  }
  .treeSelect-input {
    cursor: pointer;
  }
  .treeSelect-clear {
    cursor: pointer;
  }
  .treeSelect-dropdown {
    background-color: #fff;
    overflow: auto;
    .treeSelect-tree {
      padding: 0 10px;
      height: 260px;
      overflow: auto;
    }
    .treeSelect-bottom {
      height: 42px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-top: 1px solid #e6e6e6;
    }
  }
}
/* ::v-deep{
	.inpStyle{
		input{
			height: 36px;
			font-size: 14px;
			color: #FFFFFF;
			background: rgba(0, 186, 255, 0.35);
			border: 1px solid #00BAFF;
		}
	}
} */

</style>